<template>
  <div class="login">
    <!-- 背景图 -->
    <div class="login_bg">
      <img src="../../assets/picture.png" alt="" />
    </div>
    <!-- 登录表单 -->
    <div class="loginWondow">
      <img src="../../assets/loginPicture.png" alt="" />
      <div class="form_model">
        <div class="title">用户登录系统</div>
        <div class="nav_title">欢迎使用用户登录系统</div>
        <el-form class="el-form" ref="form" :model="form">
          <el-form-item
            label="User Name"
            prop="userName"
            required
            :rules="[
              {
                required: true,
                message: '账号不能为空',
                trigger: ['change', 'blur']
              }
            ]"
          >
            <el-input
              class="loginName"
              type="text"
              v-model.trim="form.userName"
              @keyup.native.enter="loginEvent()"
              placeholder="请输入账号"
            >
              <template slot="prefix">
                <i class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="passWord"
            prop="passWord"
            required
            :rules="[
              {
                required: true,
                message: '密码不能为空',
                trigger: ['change', 'blur']
              }
            ]"
          >
            <el-input
              class="loginPassWord"
              type="text"
              v-model.trim="form.passWord"
              @keyup.native.enter="loginEvent()"
              placeholder="请输入密码"
            >
              <template slot="prefix">
                <i class="el-icon-lock"></i>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button
          class="loginBtn"
          type="primary"
          round
          :loading="loading"
          @click="loginEvent"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  data () {
    return {
      loading: false,
      form: {
        userName: 'Admin',
        passWord: 'DB854B9A'
      }
    }
  },
  methods: {
    // 登录事件
    loginEvent () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$router.push('/layout')
          // this.$store
          //   .dispatch('actionsLogin', {
          //     userName: this.form.userName,
          //     passWord: md5(this.form.userName + this.form.passWord)
          //   })
          //   .then(isValid => {
          //     this.$router.push('/layout')
          //   })
          //   .finally(() => {
          //     this.loading = false
          //   })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes loginWondowAnimation {
  from {
    top: 65%;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}
.login {
  position: relative;
  .login_bg {
    height: 100vh;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .loginWondow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 480px;
    display: flex;
    align-items: center;
    animation: loginWondowAnimation 1s;
    .form_model {
      width: 440px;
      height: 520px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: -4px 4px 6px 0px rgba(0, 0, 0, 0.08);
      border-radius: 12px 12px 12px 12px;
      border: 1px solid #ffffff;
      margin-left: -220px;
      padding: 32px;
      .title {
        font-weight: bold;
        font-size: 22px;
        color: #333333;
      }
      .nav_title {
        font-size: 16px;
        color: #999999;
      }
      .el-form {
        /deep/ label.el-form-item__label {
          color: #333;
          font-size: 16px;
        }
        .loginName,
        .loginPassWord {
          /deep/ .el-input__inner {
            background: #f7f9fc;
            padding: 0 48px;
            border: 2px solid #ffffff;
            border-radius: 4px 4px 4px 4px;
          }
          i {
            margin-left: 12px;
            font-size: 18px;
          }
        }
      }
      .loginBtn {
        width: 376px;
        margin-top: 32px;
        background-color: #0077ff;
      }
    }
  }
}
</style>
